<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件props的验证</title>
</head>
<body>
    <div id="app">
        <html-a 
        :num="num"
        :str="str"
        :arr="arr"
        :obj="obj"
        ></html-a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //去除警告
        Vue.config.productionTip = false; 
        
        //  全局组件  全局组件也可以获取根组件 传过来的值  因为全局组件也是根组件的子组件
        Vue.component('html-a',{
            data(){
                return {
                    message:"子组件"
                }
            },
            template:`
                <div>
                    <p>{{num}} {{str}} {{arr}} {{obj.name}}</p>
                </div>   
            `,
            //props  可以通过对象传值   键是父组件传过来的值  值 是类型约束
            props:{
                num:Number,
                str:[String,Number],
                arr:Array,
                obj:Object,
            }
        });
        //new vue对象本身就是一个组件  即是根组件 也是父组件
        let vue = new Vue({
            el:"#app",
            data:{
                num:500,
                str:"str",
                arr:[1,2,3,4,5],
                obj:{
                    name:'tianyi'
                }
            },
            methods: {
                
            },
            
        })
    </script>
</body>
</html>